<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="__STATIC__/js/base.js"></script>
    <title>个人设置</title>
    <link rel="stylesheet" href="__STATIC__/css/base.css">
    <link rel="stylesheet" href="__STATIC__/css/userinfo.css">
    <script src="__STATIC__/js/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="__STATIC__/css/index.css">
    <script src="__STATIC__/js/layer/layer.js" type="text/javascript"></script>
</head>
<style type="text/css">
    *{
        font-family: "黑体";
    }
    body,html{
        height: 100%;
        overflow: auto;
    }
    html{ background-color: hsla(0,0%,96%,1.00);
    }
    body{
        background: none;
    }

    #headimg{
        width:4rem;
        height: 4rem;
        border: 2px solid #ffffff;
        margin: auto;
        /*background-size:100% 100% !important;*/
        /*background-repeat:no-repeat;*/
        /*background-position: center center;*/
        margin-top: 0.32rem;
    }
    #headimg img{
        width:4rem;
        max-width: 100%;
        display: block;
    }
    #headimg .btn{
        display: block;
        position: relative;
        height: 1rem;
        line-height: 1rem;
        margin: auto;
        font-size: 0.512rem;;
        text-align: center;
        width: 3.8366666rem;
        top: -1rem;
        background: #f3f0f1;
        color: #22a0dc;
    }


    /*截图上传页面*/
    .clipbg{
        position: fixed;
        background: black;
        top: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        left: 0;
    }
    .loading{
        position: absolute;
        top: 40%;
        width: 38%;
        left: 31%;
        height: 1.6rem;
        line-height: 1.6rem;
        z-index: 99999;
        text-align: center;
        color: #ffffff;
        border-radius:0.2rem ;
        background: #9f9f9f;
    }
    .clipbg #clipArea{
        width: 100%;
        height: 80%;
        margin: auto;

    }
    .clipbg .footer{
        width: 90%;
        position: fixed;
        left: 5%;
        bottom: 0px;
        text-align: center;
    }
    .clipbg dl{
        background: #ffffff;
        border-radius: 0.4rem;
        overflow: hidden;
        margin-bottom: 0.6rem;
    }
    .clipbg dd{
        position: relative;
        height: 2.25rem;
        line-height: 2.25rem;
        border-bottom:1px solid #999999 ;
    }
    .clipbg .back{
        height: 2.25rem;
        line-height:2.25rem;
        border-radius: 0.4rem;
        margin-bottom: 0.4rem;
        background: #ffffff;
    }
    .clipbg dd input{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 11;
        filter:alpha(opacity=0);
        -moz-opacity:0;
        -khtml-opacity: 0;
        opacity: 0;
    }
    .enter-edit{
        line-height: 2.036rem;
        margin-left: 0.866666rem;
    }
    .enter-edit img{
        width: 0.234666667rem;
    }
</style>
<body>
<section class="wrap " style="background: #F6F4F4">
    <div id="content">
        <form action="#"  class=""  id="form1">
            <div class="setting-2 clearfix wrap-white" id="head-set">
                <a class="border-e8"  >
                    <ul class="clearfix">
                        <li  class="pull-left size-26">头像</li>
                        <li  class="pull-right" >
                            <div id="headimg" class="edit">
                                <input type="hidden" name="headImgFileId" value="{$user.headImgFileId ? $user.headImgFileId :''}" id="reviewFile5" >
                                <img src="{$user.thumbFile ??'__STATIC__/images/head.jpg'}"   id="reviewImg5">
                                <span  class="btn">修改头像</span>
                            </div>
                        </li>
                    </ul>
                </a>
            </div>
            <script>
                $('#reviewImg5').on('click',function(){
                    var url = 'uploadIndex?d=5';
                    layer_layer2("上传",url);
                });
            </script>
            <div class="setting-1 clearfix wrap-white" id="name-set">
                <a class="border-e8" onclick="editName()">
                    <ul class="clearfix">
                        <li  class="pull-left size-26">用户名</li>
                        <li  class="pull-right col-888" id="name">{$user.memberName ? $user.memberName :''}</li>
                    </ul>
                </a>
            </div>
            <input type="hidden" name="memberName" value="{$user.memberName ?? ''}">
            <script>
                $(function () {
                    var xx = getUrlParam('userName');
                    if(xx==null){
                    }else {
                        $("#name").html(xx);
                        $("input[name='memberName']").val(xx)
                    }

                })

                //获取url中的参数
                function getUrlParam(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                    if (r != null) return unescape(r[2]); return null; //返回参数值
                }
            </script>
            <div class="setting-1 clearfix wrap-white" id="sex-set">
                <a class="border-e8" >
                    <ul class="clearfix">
                        <li  class="pull-left size-26">姓别</li>
                        <li  class="pull-right">

                            <span  style="margin-right: 1.2rem"> <input type="radio"class="radio" name="sex" value="男"   {if condition="$user.sex  eq '男' or  $user.sex eq ''" }checked {/if}> 男</span>
                            <span  > <input type="radio" name="sex" class="radio" value="女" {if condition="$user.sex  eq '女' " }checked {/if}> 女</span>
                        </li>
                    </ul>
                </a>
            </div>
            <div class="setting-1 clearfix wrap-white" id="phone-set">
                <a class="border-e8" onclick="editPhone()">
                    <ul class="clearfix">
                        <li  class="pull-left size-26">手机号</li>
                        <li  class="pull-right col-888">{$user.phonefont}****{$user.phoneback}</li>
                    </ul>
                </a>
            </div>
            <div class="setting-1 clearfix wrap-white" id="email-set">

                    {if condition="$user.email  neq NUll " }
                <a class="border-e8" onclick="editEmail()">
                    <ul class="clearfix">
                        <li  class="pull-left size-26">邮箱</li>
                        <!--<li  class="pull-right enter-edit"><img src="images/enter.png"></li>-->
                        <li  class="pull-right col-888">{$user.emailfontk}****{$user.emailback}</li>
                        <!--<li  class="pull-right col-blue">未绑定</li>-->
                    </ul>
                </a>
                    {/if}
                    {if condition="$user.email  eq NUll " }
                <a class="border-e8" onclick="editEmail()">
                    <ul class="clearfix">
                        <li  class="pull-left size-26">邮箱</li>
                        <!--<li  class="pull-right enter-edit"><img src="images/enter.png"></li>-->
                        <li  class="pull-right col-blue">未绑定</li>
                    </ul>
                </a>
                    {/if}

            </div>
            <input type="hidden" name="score" id="score">
            <input type="button" class="login-button" value="完成" id="sublimit" style="width: 90%;border: none;margin-top: 5.28rem">
        </form>
    </div>
</section>
<link rel="stylesheet" type="text/css" href="__STATIC__/js/upload/aui.css">
<link rel="stylesheet" href="__STATIC__/js/upload/intial.css">
<script type="text/javascript" src="__STATIC__/js/upload/hammer.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/upload/lrz.all.bundle.js"></script>
<script type="text/javascript" src="__STATIC__/js/upload/iscroll-zoom-min.js"></script>
<script type="text/javascript" src="__STATIC__/js/upload/PhotoClip.js"></script>
<script>
    $(".login-button").click(function () {
        var sex = $("input[name='sex']:checked").val();
        var img=$("input[name='headImgFileId']").val();
        $.ajax({
            cache: true,
            type: "POST",
            url:"setting",
            data:{sex:sex,headImgFileId:img},// 你的formid
            async: false,
            error: function(request) {
                layer.open({
                    content:'提交失败'
                    ,skin: 'msg'
                    ,time:3 //2秒后自动关闭
                });
            },
            success: function(data) {
                if(data.code =='ok'){
                    //连接不对
                    window.location.href= '/setting.html';
                }else {
                    layer.open({
                        content:data.msg
                        ,skin: 'msg'
                        ,time:3 //2秒后自动关闭
                    });
                }
            }
        })
    })

    $(".edit").click(function(){
        $(".clipbg").fadeIn()
    })
    var clipArea = new  PhotoClip("#clipArea", {
        size: [300,300],//裁剪框大小
        outputSize:[0,0],//打开图片大小，[0,0]表示原图大小
        file: "#file",
        ok: "#clipBtn",
        loadStart: function() { //图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象，并将正在加载的 file 对象作为参数传入。（如果是使用非 file 的方式加载图片，则该参数为图片的 url）
            $(".loading").removeClass("displaynone");

        },
        loadComplete: function(){
//            $(".loading").addClass("displaynone");
        },
        done: function(dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象，会将裁剪出的图像数据DataURL作为参数传入。
            console.log(dataURL);//dataURL裁剪后图片地址base64格式提交给后台处理
            $(".clipbg").fadeOut();
            $('#headimg img').attr('src',dataURL);
        }
    });
    $(".back").click(function(){
        $(".clipbg").fadeOut()
    })
</script>
<script>
    function editPhone(){
        window.location.href='editPhone.html';
    }
    function editEmail(){
        window.location.href='editEmail.html';
    }
    function editName(){
        window.location.href='editUseName.html';
    }
</script>
</body>
</html>